<template>
  <div class="back">
    <div class="header">
      <div class="photo">
        <!-- 头像 -->
        <el-image
          class="el-image-photo"
          style="width: 100px; height: 100px; border-radius: 50%"
          :src="url"
        ></el-image>
        <!-- 修改头像 -->
        <el-button
          class="el-button-updatephoto"
          @click="dialogFormVisible = true"
          type="text"
          >修改头像</el-button
        >
      </div>
    </div>
    <div class="center">
      <!-- 数据 -->
      <el-form label-position="left" label-width="80px">
        <el-form-item label="登录用户">
          <el-input v-model="Info.username" disabled />
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="Info.realname" disabled />
        </el-form-item>
        <el-form-item label="用户手机">
          <el-input v-model="Info.telephone" disabled />
        </el-form-item>
        <el-form-item label="用户性别">
          <el-input v-model="Info.gender" disabled />
        </el-form-item>
        <el-form-item label="用户生日">
          <el-input v-model="Info.birth" disabled />
        </el-form-item>
        <el-form-item label="注册时间">
          <el-input v-model="Info.registerTime" disabled />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="Info.email" disabled />
        </el-form-item>
        <el-form-item label="用户状态">
          <el-tag v-if="Info.status == '禁用'" type="danger">{{
            Info.status
          }}</el-tag>
          <el-tag v-else type="success">{{ Info.status }}</el-tag>
        </el-form-item>
      </el-form>
      <div>
        <el-button
          @click="dialogFormVisible1 = true"
          class="el-button-updateInfo"
          type="text"
          >修改信息</el-button
        >
      </div>
    </div>
    <!-- 修改头像模态框 -->
    <el-dialog title="修改头像" :visible.sync="dialogFormVisible">
      <el-upload
        ref="upload"
        class="avatar-uploader"
        action="http://81.69.24.232/pet/jz_upload.php"
        :drag="true"
        :show-file-list="false"
        :on-success="succseeHandler"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="ruleForm.userFace" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <div slot="tip" class="el-upload__tip">文件大小不允许超过3M</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button
          type="primary"
          class="el-button-sure"
          size="mini"
          @click="updatePhoto"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改个人信息模态框 -->

    <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible1">
      <el-form
        :model="customeForm1"
        :rules="rules1"
        ref="custome_form"
        label-width="100px"
      >
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="customeForm1.username"></el-input>
        </el-form-item>
        <!-- 姓名 -->
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="customeForm1.realname"></el-input>
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="customeForm1.telephone"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="customeForm1.password"></el-input>
        </el-form-item>
        <!-- 性别 -->
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="customeForm1.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="famale">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- 表单结束 -->
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeDialog">取 消</el-button>
        <el-button
          class="el-button-sure"
          size="mini"
          type="primary"
          @click="updataCustomer"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import { get, post } from "../../utils/request";
export default {
  data() {
    return {
      url: "",
      rules1: {
        // 用户名
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        // 姓名
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        // 手机号
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        // 性别
        gedder: [{ message: "请选择性别", trigger: "change" }],
        // 密码
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
        // 状态
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
      // 模态框表单
      customeForm1: {
        // 用户名称
        username: "",
        // 姓名
        realname: "",
        // 手机号
        telephone: "",
        // 密码
        password: "",
        // 性别
        gender: "",
      },
      Info: {
        // 头像
        userFace: "",
        // 生日
        birth: "",
        // 注册时间
        registerTime: "",
      },
      id: "",
      dialogFormVisible: false,
      dialogFormVisible1: false,
      imageUrl: "",
      ruleForm: {},
    };
  },
  computed: {},
  methods: {
    // 获取数据
    queryInfo(id) {
      get("/baseUser/findUserDetailsById", { id }).then((res) => {
        // console.log(res);
        this.Info = res.data;
        this.url = this.Info.userFace;
        this.Info.registerTime = moment(this.Info.registerTime).format(
          "YYYY-MM-DD"
        );
        this.Info.birth = moment(this.Info.birth).format("YYYY-MM-DD");
      });
    },
    // 上传头像
    succseeHandler(file) {
      // file:文件路径
      this.imageUrl = file;
      this.ruleForm.userFace = file;
    },
    // 限制上传的封面的大小
    beforeAvatarUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
      return isLt3M;
    },
    // 修改头像
    updatePhoto() {
      this.dialogFormVisible = true;
      this.ruleForm.id = this.id;
      post("/baseUser/alterUserface", this.ruleForm).then((res) => {
        // console.log(res);
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.queryInfo(this.id);
          this.$refs.upload.clearFiles();
          this.dialogFormVisible = false;
        } else {
          this.$message.error(res.message);
          this.dialogFormVisible = false;
        }
      });
    },
    // 关闭模态框
    closeDialog() {
      // 关闭模态框
      this.dialogFormVisible1 = false;
      // 重置表单
      this.$refs["custome_form"].resetFields();
    },
    
    // 更新用户信息
    updataCustomer() {
      post("/baseUser/saveOrUpdate", this.customeForm1).then((res) => {
        // console.log(res);
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.queryInfo(this.id);
          this.dialogFormVisible1 = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
  created() {},
  mounted() {
    this.id = this.$route.query.id;
    this.queryInfo(this.id);
  },
};
</script>
<style scoped>
.el-image-photo {
  margin-left: 200px;
}
.el-button-updatephoto {
  padding-left: 700px;
  color: #409eff;
  font-size: 12px;
}
.el-button-updateInfo {
  color: #409eff;
  font-size: 12px;
  padding-left: 1000px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  line-height: 180px;
  text-align: center;
}
.avatar {
  width: 100%;
  height: 100%;
  display: block;
}
.el-button-sure {
  background-color: #409eff;
  color: white;
}
</style>